<template>
  <div>
    <SearchForm @new="createTask" @get="handleSearch" @clear="handleClear"></SearchForm>
    <Row style="margin-top: 30px">
      <Col span="4">
        <TraceList
          ref="nav"
          @setSampleTable="setSampleTable"
          @clearSampleTable="clearSampleTable"
          @clearAnalyze="clearAnalyze"
        ></TraceList>
      </Col>
      <Col span="20">
        <TraceTable ref="table"></TraceTable>
      </Col>
    </Row>
    <CreateTask ref="create"></CreateTask>
  </div>
</template>
<script lang="ts" setup>
import { Row, Col } from 'ant-design-vue';
import SearchForm from './component/SearchForm.vue';
import CreateTask from './component/CreateTask.vue';
import TraceList from './component/TraceList.vue';
import TraceTable from './component/TraceTable.vue';
import { ref } from 'vue';
const create = ref();
const nav = ref();
const table = ref();
const createTask = (serviceInfo) => {
  create.value.openModal(serviceInfo);
};

const handleSearch = (searchFormParams) => {
  nav.value.clear();
  table.value.clear();
  nav.value.setTaskList(searchFormParams);
};
const setSampleTable = (sampleItem) => {
  table.value.setTable(sampleItem);
};
const clearAnalyze = () => {
  table.value.clearAnalyze();
};
const clearSampleTable = () => {
  table.value.clear();
};
const handleClear = () => {
  nav.value.clear();
  table.value.clear();
};
</script>
